<template>
  <!-- pc相关报道-实验发现 -->
  <div class="experiment">
    <!-- 新版swiper -->
    <swiper
      :autoplay="{
        delay: 5000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      }"
      :pagination="{
        el: '.swiper-pagination',
        clickable: true,
      }"
      class="swiper-container"
      :navigation="{
        nextEl: '.swiper-container-button-next',
        prevEl: '.swiper-container-button-prev',
      }"
    >
      <swiper-slide v-for="item in list" :key="item">
        <div class="content">
          <img class="bg" src="../../../assets/image/product/bg.png" />
          <toNews :detail="item" class="router">
            <img class="rig-img" :src="item.webimages" />
            <div class="text">
              <div class="title">
                {{ item.name }}
              </div>
              <div class="describe">
                {{ item.description }}
              </div>
            </div>
            <div class="btn">
              查看详情
            </div>
          </toNews>
        </div>
      </swiper-slide>

      <template #container-start>
        <div class="swiper-pagination"></div>
        <div class="swiper-container-button swiper-container-button-next"></div>
        <div class="swiper-container-button swiper-container-button-prev"></div>
      </template>
    </swiper>
  </div>
  <!-- 移动端 -->
  <div class="mobile">
    <div class="angle" v-if="type == 1 && status == 2">实验发现</div>
    <div class="angle-left" v-if="type == 1 && status == 1">实验发现</div>
    <div class="angle" v-if="type == 2 && status == 2">相关报道</div>
    <div class="angle-left" v-if="type == 2 && status == 1">相关报道</div>

    <div class="frame-box">
      <swiper
        :autoplay="{
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
        }"
        :pagination="{
          el: '.swiper-pagination',
          clickable: true,
        }"
        class="swiper-container"
      >
        <swiper-slide v-for="item in list" :key="item">
          <toNews :detail="item" class="content">
            <img class="bg" src="@/assets/image/product/bg.png" />
            <div class="title">
              {{ item.name }}
            </div>
            <div class="text-img">
              <img class="rig-img" :src="item.mobileimages" />
              <div class="describe">
                {{ item.description }}
              </div>
              <div class="btn">查看详情</div>
            </div>
          </toNews>
        </swiper-slide>

        <template #container-start>
          <div class="swiper-pagination"></div>
        </template>
      </swiper>
    </div>
  </div>
</template>

<script>
import toNews from "@/components/toNews";
export default {
  components: {
    toNews,
  },
  props: {
    list: {
      type: Array,
    },
    status: Number,
    type: Number, //用来区分 相关报道和实现发现m
  },
  data() {
    return {};
  },

  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .mobile {
    display: none;
  }

  .experiment {
    display: flex;
    justify-content: center;

    // width: 1200px;
    height: 337px;

    .swiper-container {
      .swiper-pagination {
        width: 630px !important;
        right: 0 !important;
        left: initial !important;
        bottom: 50px !important;
      }

      &-button {
        width: 20px;
        height: 20px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 11;

        &-prev {
          left: 0;
          width: 19px;
          height: 79px;
          background-size: 12px;
          background-position: center;
          background-repeat: no-repeat;
          background-image: url("~@/assets/image/home/ic_left.png");

          &:hover {
            background-size: 8px;
            background-color: color.$base;
            background-image: url("~@/assets/image/home/ic_left_white.png");
          }
        }

        &-next {
          right: 0;
          width: 19px;
          height: 79px;
          background-size: 12px;
          background-position: center;
          background-repeat: no-repeat;
          background-image: url("~@/assets/image/home/ic_right.png");

          &:hover {
            background-size: 8px;
            background-color: color.$base;
            background-image: url("~@/assets/image/home/ic_right_white.png");
          }
        }
      }

      .swiper-wrapper {
        .swiper-slide {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;

          .content {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            height: 337px;

            .bg {
              position: absolute;
              right: 0;
              // bottom: 36px;

              width: 578;
              height: 303;
            }

            .btn {
              position: absolute;
              left: calc(50% - 114px);
              bottom: 70px;
              cursor: pointer;
              display: flex;
              justify-content: center;
              align-items: center;

              width: 138px;
              height: 40px;
              background: #ee7800;
              border-radius: 20px;
              color: #fff;

              &:active {
                background: rgba(210, 217, 236, 0.878);
              }
            }

            .router {
              display: flex;
              position: relative;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;

              .rig-img {
                // margin-left: 80px;
                @include fn.scale(352px);
              }

              .text {
                margin-left: 50px;
                height: 170px;
                width: 630px;

                .title {
                  width: 630px;
                  line-height: 24px;
                  height: 24px;
                  @include fn.title;
                }

                .describe {
                  margin-top: 25px;
                  width: 630px;
                  line-height: 24px;
                  height: 72px;
                  @include fn.describe(3);
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .experiment {
    display: none;
  }

  .mobile {
    margin-top: fn.rpx(40);
    width: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
    position: relative;

    .angle-left {
      // position:absolute;
      // left:0;
      width: fn.rpx(292);
      height: fn.rpx(75);
      background-size: 100% 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url(../../../assets/image/product/left-bg.png);
      font-size: fn.rpx(26);

      font-weight: 400;
      color: #939393;
      display: flex;
      box-sizing: border-box;
      padding-left: fn.rpx(40);
      align-items: center;
    }

    .angle {
      margin-left: fn.rpx(408);
      width: fn.rpx(292);
      height: fn.rpx(75);
      background-size: 100% 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url(../../../assets/image/product/right-bg.png);
      font-size: fn.rpx(26);

      font-weight: 400;
      color: #939393;
      display: flex;
      box-sizing: border-box;
      padding-left: fn.rpx(140);
      align-items: center;
    }

    .frame-box {
      box-sizing: border-box;
      padding: fn.rpx(30) 0;
      background: #fff;
      border-radius: fn.rpx(12) 0 fn.rpx(12) fn.rpx(12);

      .swiper-container {
        width: 100%;
        display: flex;

        .swiper-slide {
          cursor: pointer;

          display: flex;

          justify-content: center;

          align-items: center;

          .content {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            padding: 0 fn.rpx(30);
            height: fn.rpx(337);

            .bg {
              position: absolute;
              right: 0;
              bottom: fn.rpx(10);
              // width: fn.rpx(320);
              // height: fn.rpx(170);
              width: fn.rpx(480);
              height: fn.rpx(300);
              object-fit: cover;
            }

            .title {
              margin-top: fn.rpx(10);
              @include fn.ellipsis(1);
              width: fn.rpx(629);
              font-size: fn.rpx(18);

              font-weight: bold;
              color: #222222;
              line-height: fn.rpx(24);
            }

            .text-img {
              position: relative;
              width: 100%;
              margin-top: fn.rpx(30);
              display: flex;

              .btn {
                position: absolute;
                top: fn.rpx(130);
                right: 0;
                cursor: pointer;
                display: flex;
                font-size: fn.rpx(17);
                justify-content: center;
                align-items: center;
                width: fn.rpx(138);
                height: fn.rpx(40);
                background: #ee7800;
                border-radius: fn.rpx(20);
                color: #fff;

                &:active {
                  background: rgba(210, 217, 236, 0.878);
                }
              }

              .describe {
                margin-left: fn.rpx(15);
                width: fn.rpx(316);
                height: fn.rpx(100);
                font-size: fn.rpx(16);
                font-weight: 400;
                color: #939393;
                line-height: fn.rpx(26);
                @include fn.describe(4);
                overflow: hidden;
              }

              .rig-img {
                // width: fn.rpx(295);
                // height: fn.rpx(172);
                // object-fit: cover;
                @include fn.scale(fn.rpx(295));
              }
            }
          }
        }
      }
    }
  }
}
</style>